<template>
    <view style="padding: 20upx 40upx;">
        <view class="align-center">
            <u-avatar :src="userInfo.avatar" size="50"></u-avatar>
            <view class="avator between-center">
                <view>
                    <view class="flex" @click="tologin">{{ userInfo.nickname  ? userInfo.nickname : '登录/注册' }}
                        <u-icon name="man-add" color="#3180FF" v-if="userInfo.nickname"></u-icon>
                    </view>
                    <!-- <view class="flex">六二牛</view> -->
                    <view style="font-size: 24upx; font-weight:300" v-if="userInfo.nickname">UID：{{userInfo.uid || 0}}</view>
                </view>
                <view class="avator_level" v-if="userInfo.nickname">会员等级 lv.{{userInfo.level || 0}}</view>

            </view>

        </view>
        <view class="boxshadow">
            <u-grid :border="false" col="4">
                
                <u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex" @click="() => handleGrid(baseListItem.url)">
                    <u-icon
                    :customStyle="{paddingTop:20+'rpx'}"
                    :name="baseListItem.name"
                    :size="22"
            ></u-icon>

                    <text class="grid-text">{{ baseListItem.desc_text }}</text>
                </u-grid-item>
            </u-grid>
        </view>

        <pageTitle title="推荐项目"></pageTitle>
        <view v-for="item in 10" :key="item" style="margin-bottom: 20upx;" @click="handleClick">
            <view class="between-center">
                <view class="flex">
                    <h3 style="margin-right: 20upx;">康小狐 健康小屋</h3>
                    <u-tag text="标签" plain size="mini" type="warning"></u-tag>
                </view>

                <u-icon name="star"></u-icon>
            </view>

            <view class="project_desc">健康小屋项目简介</view>
            <view class="project_desc" style="color: #666;">健康小屋项目简介健康小屋项目简介健康小屋项目简介健康小屋项目简介</view>
            <img src="" alt="" class="project_img">
        </view>
        <!-- <view class="tologin" @click="tologin" v-if="showlogin"></view> -->
        <wx-auth :isshow="wxAuth" @changeshow="wxisshow" @userInfo="getuserInfo" @phone="getphone"></wx-auth>
    </view>
</template>

<script>
// import uGrid from '@/components/uGrid/index.vue'
import pageTitle from '@/components/pageTitle.vue'
import wxAuth from '@/components/wxAuth/index.vue'
export default {
    components: {
        // uGrid,
        pageTitle,
        wxAuth
    },
    data() {
        return {
            title: 'Hello',
            baseList: [{
                name: 'calendar',
                desc_text: '项目发布',
                color: '#3180FF',
                url: '/pages/mine/publish'
            },
            {
                name: 'star',
                desc_text: '关注收藏',
                color: '#3180FF',
                url: '/pages/mine/collect'
            },
            {
                name: 'order',
                desc_text: '认证企业',
                color: '#3180FF',
                url:'/pages/mine/renzheng'
            },
            {
                name: 'order',
                desc_text: '会员权益',
                color: '#3180FF',
                url:'/pages/mine/huiyuan'
            }
            ],
            wxAuth: {
                show: false,
                islogin: false,
                isphone: false
            },
            uShopkeeper: 1,
            showlogin: false,
            userInfo: '',
            currentTabIndex: 3,
            userphone: ''

        }
    },
    onLoad() { },
    onShow() {
        const userInfo = uni.getStorageSync('userInfo')
       
        const userphone = uni.getStorageSync('uPhone')
        console.log(userInfo.nickname,'userInfo');
        if (userInfo) {
            this.userInfo = userInfo
            if (!userphone) {
                this.showlogin = true
                this.wxAuth.isphone = true
            } else {
                this.userphone = userphone
            }
        } else {
            this.showlogin = true
            this.wxAuth.islogin = true
        }
    },
    methods: {
        handleClick() {
            uni.navigateTo({ url: '/pages/project/details' })
        },
        tologin() {
            if (this.userInfo.nickName) return
            this.wxAuth.show = true
        },
        wxisshow(res) {
            if (!res.isphone && !res.islogin) {
                this.showlogin = false
            }
            this.wxAuth = res
            var userInfo = uni.getStorageSync('userInfo')
            this.userInfo = userInfo
        },
        getuserInfo(res) {
            var userphone = uni.getStorageSync('uPhone')
            if (userphone) {
                this.userphone = userphone
            }else{
                this.wxAuth.show = true
                this.wxAuth.isphone = true
            }
            this.userInfo = res
            

        },
        getphone(res) {
            this.userphone = res
        },
        handleGrid(url) {
            const token = uni.getStorageSync('token')
            if(url === '/pages/mine/huiyuan' && this.userInfo.is_ever_level != 1){
                global.showToast('仅会员才可查看')
                return
            }
            if(token || url === '/pages/mine/huiyuan'){
                uni.navigateTo({ url})
            }else{
                this.wxAuth.show = true
                if(!this.userInfo.nickname){
                    this.wxAuth.islogin = true
                }else{
                    this.wxAuth.isphone = true
                }
               
            }
            
           
        }
    },
}
</script>


<style scoped lang="scss">
.avator {
    flex: 1;
    margin-left: 40upx;
    font-size: 32upx;

    .avator_level {
        background-color: #999;
        color: #fff;
        font-size: 24upx;
        border-radius: 20upx;
        padding: 10upx 40upx;
    }
}

.boxshadow {
    border-radius: 20upx;
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.1);
    margin: 40upx 0px;
    padding: 20upx 0px 40upx 0px;
}

.project_desc {
    font-size: 24upx;
    color: #999;
    font-weight: 400;
    margin-top: 10upx;

}

.project_img {
    width: 100%;
    background: #f0f0f0;
    border-radius: 20upx;
    margin-top: 20upx;
}

.tologin {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*z-index: 999;*/
}

.grid-text {
    font-size: 28upx;
    color: #666;
    margin-top: 10upx;
}

.grid_img {
    width: 100upx;
    height: 100upx;
    border-radius: 50%;
    background-color: #f0f0f0;
}

.pageTitle {
    margin-top: 40upx;
}
</style>